<script setup>
import { computed, onMounted, ref, provide } from 'vue'
import * as echarts from 'echarts'

import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'
import imgUrl from '../src/assets/logo.jpg'
import { useSqliteStore } from './store/sqliteData'
import { initData } from './utils/initData'
import { useRoute } from 'vue-router'
const SqliteData = useSqliteStore()
provide('echarts', echarts)
const changeSelect = (key) => {
  console.log(key)
}
const isCollapse = ref(false)
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
const buit = ref()
const buttt = () => {
  const driverObj = driver({
    showButtons: ['next', 'previous'],
    showProgress: false,
    nextBtnText: '下一个',
    prevBtnText: '上一个',
    doneBtnText: '关闭',
    popoverClass: 'driverjs-theme',
    steps: [
      {
        popover: {
          title: '新手指引',
          description: '通过本指引，您将了解如何在该软件中如何录入和管理信息。',
          side: 'left',
          align: 'start',
          popoverClass: 'driverjs-theme'
        }
      },
      {
        element: '#excle',
        popover: {
          title: '导入Excel',
          description:
            '开始前，请确保表格数据已录入。表格列名应包含学号、姓名、班级和性别，但顺序不限。',
          side: 'bottom',
          align: 'start'
        }
      },
      {
        element: '.avt',
        popover: {
          title: '录入头像',
          description:
            '接下来，我们需要导入图片。请确保图片文件名与学号一致，并尽量保持图片大小适中，以优化加载速度。',
          side: 'bottom',
          align: 'start',
          popoverClass: 'driverjs-theme'
        }
      },
      {
        element: '#delete',
        popover: {
          title: '批量删除',
          description: '在左侧勾选需要删除的学生记录，然后点击此处即可进行批量删除操作。',
          side: 'top',
          align: 'start'
        }
      },
      {
        element: '#search',
        popover: {
          title: '搜索学生',
          description:
            '您可以按学生姓名或学号进行搜索。若搜索框为空，点击搜索按钮将重置搜索结果，显示所有学生记录。',
          side: 'left',
          align: 'start'
        }
      },
      {
        element: '#userInfo',
        popover: {
          title: '查看学生信息',
          description: '点击右侧蓝色按钮可以查看学生的详细信息，包括回答记录和其他相关数据。',
          side: 'left',
          align: 'start'
        }
      },
      {
        element: 'asd',
        popover: {
          title: '完成指南',
          description: '恭喜！您已掌握数据录入的基本操作，现在可以亲自尝试并应用这些技能了。',
          side: 'right',
          align: 'start'
        }
      }
    ]
  })
  driverObj.drive()
}
const menuBar = (type) => {
  window.electronAPI.menuBar(type)
}
const myPromise = (callback) => {
  return new Promise((resolve) => {
    callback((result) => {
      resolve(result)
    })
  })
}
const mainOut = window.electronAPI.mainOut
onMounted(() => {
  init()
})
const init = async () => {
  await initData(SqliteData)
}
const classList = computed(() => {
  return SqliteData.getClassList()
})
const changeClass = (classNum) => {
  console.log(classNum)
}
const confirmHandler = async () => {
  await window.electronAPI.rendererSend('deleteAll')
  let res = await myPromise((callback) => {
    mainOut(callback)
  })
  if (res.data.success) {
    window.electronAPI.menuBar(4)
    ElNotification({
      title: 'Success',
      message: '格式化成功',
      type: 'success',
      duration: 2000
    })
  } else {
    ElNotification({
      title: 'error',
      message: '格式化失败',
      type: 'error',
      duration: 2000
    })
  }
}
const route = useRoute()
const path = computed(() => {
  return route.path
})
</script>

<template>
  <div class="layout" style="display: flex; flex-direction: column">
    <el-container style="width: 100%; height: 80%">
      <el-aside>
        <el-menu
          default-active="/"
          class="el-menu-vertical-demo color_1"
          :collapse="isCollapse"
          :router="true"
          @open="handleOpen"
          @close="handleClose"
          @change="changeSelect"
        >
          <h1 class="mb-2 drag">点名器</h1>
          <el-menu-item index="/">
            <el-icon><Memo /></el-icon>
            <template #title>数据总览</template>
          </el-menu-item>
          <el-menu-item index="/import">
            <el-icon><SetUp /></el-icon>
            <template #title>数据导入</template>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Mic /></el-icon>
              <span>点名抽人</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/named">随机点名</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <div class="drag title">
          <div class="right">
            <span class="item ndrag pointer" @click="menuBar(1)">
              <el-icon class="icon"><Minus /></el-icon>
            </span>
            <span class="item ndrag pointer" @click="menuBar(2)">
              <el-icon class="icon"><CopyDocument /></el-icon>
            </span>
            <span class="item ndrag pointer" @click="menuBar(3)">
              <el-icon class="icon"><Close /></el-icon>
            </span>
          </div>
        </div>
        <el-header class="app_header drag">
          <div class="app_left ndrag" @click="isCollapse = !isCollapse">
            <el-icon v-show="!isCollapse" size="25"><Fold /></el-icon>
            <el-icon v-show="isCollapse" size="25"><Expand /></el-icon>
          </div>
          <div class="app_right">
            <el-dropdown :hide-on-click="false" id="avatar">
              <el-avatar class="ndrag" :size="50" :src="imgUrl" />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    ref="buit"
                    class="tag-center"
                    @click="buttt"
                    v-if="path == '/import'"
                  >
                    <el-tag type="primary">新手指引</el-tag>
                  </el-dropdown-item>
                  <el-dropdown-item ref="buit" class="tag-center">
                    <el-popconfirm
                      confirm-button-text="确认"
                      cancel-button-text="取消"
                      icon-color="#626AEF"
                      title="是否格式化?软件将会重启"
                      @confirm="confirmHandler"
                    >
                      <template #reference>
                        <el-tag type="primary">格式化软件</el-tag>
                      </template>
                    </el-popconfirm>
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-for="item in classList"
                    :key="item"
                    ref="buit"
                    class="tag-center"
                    @click="changeClass(item)"
                  >
                    <el-tag type="success"> {{ item.class }}班</el-tag>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main class="main" style="position: flex">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
#avatar {
  cursor: pointer;
}
:deep(.tag-center) {
  display: flex;
  justify-content: center;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.pointer {
  cursor: pointer;
}
.title {
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: flex-end;
  .right {
    width: 5rem;
    display: flex;
    .item {
      flex: 1;
      height: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s ease;
      .icon {
        font-size: 1rem;
      }
    }
    .item:hover {
      background-color: rgba(0, 0, 0, 0.5) !important;
    }
    .item:nth-child(3):hover {
      background-color: rgba(255, 0, 0, 0.8) !important;
    }
  }
}
.drag {
  -webkit-app-region: drag;
}
.ndrag {
  -webkit-app-region: none !important;
}
* {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
}
// .color_1 {
//   background-color: #f0f3f6;
// }

.main {
  flex: 1;
  border-radius: 10px;
  box-shadow: inset 0 0 5px #c1c1c1;
  background-color: rgba(193, 193, 193, 0.2);
}
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: auto;
}
.el-menu-vertical-demo {
  height: 100%;
}
.mb-2 {
  display: flex;
  font-weight: 700;
  justify-content: center;
  align-items: center;
  height: 3em;
}
:deep(.el-aside) {
  width: auto;
}
.app_header {
  display: flex;
  justify-content: space-between;
  height: 4rem !important;
  .app_left {
    height: 100%;
    width: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .app_right {
    display: flex;
    align-items: center;
  }
}
</style>
